<template>
  <div class="login-box">
    <!-- <h1>登录呗，只有我的账号才是管理员~~~~~~~~~~~~~~~</h1> -->
    <el-tabs
      v-model="activeName"
      type="card"
      class="login-body"
      @tab-click="handleClick"
    >
      <el-tab-pane label="登录" name="first">
        <div style="background-color: white;">
          <form action="#" class="outside-form" name="loginForm">
            <!-- <h2>登 录</h2> -->
            <div class="form-group">
              <label for="name">name</label>
              <input
                type="text"
                class="form-control"
                name="user"
                placeholder="用户名"
                autocomplete="off"
                v-model="loginUser"
              />
            </div>
            <div class="form-group">
              <label for="password">password</label>
              <input
                type="password"
                class="form-control"
                name="password"
                placeholder="密码"
                autocomplete="off"
                v-model="loginPassword"
              />
            </div>
          </form>
          <div class="form-group form-group-bottom" style="margin-bottom:10px;">
            <input
              type="submit"
              value="登录"
              class="btn btn-primary"
              @click="login()"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册" name="second">
        <div style="background-color: white;">
          <form action="#" class="outside-form" name="loginForm">
            <!-- <h2>注 册</h2> -->
            <div class="form-group">
              <label for="name">name</label>
              <input
                type="text"
                class="form-control"
                name="user"
                placeholder="用户名"
                autocomplete="off"
                v-model="registerUser"
              />
            </div>
            <div class="form-group">
              <label for="password">password</label>
              <input
                type="password"
                class="form-control"
                name="password"
                placeholder="密码"
                autocomplete="off"
                v-model="registerPassword"
              />
            </div>
            <div class="form-group">
              <label for="password">password</label>
              <input
                type="password"
                class="form-control"
                name="password"
                placeholder="再次输入密码"
                autocomplete="off"
                v-model="registerAgainPassword"
              />
            </div>
          </form>
          <div class="form-group form-group-bottom" style="margin-bottom:10px;">
            <input
              type="submit"
              value="注册"
              class="btn btn-primary"
              @click="register"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
@import "../styles/Login.css";

.login-box {
  margin: 0 auto;
  width: 60%;
}

.login-body {
  margin-top: 140px;
}
</style>

<script>
export default {
  data() {
    return {
      isManager:this.$root.isManager,
      activeName: "first",
      changeAgainFlag: 1,
      loginUser: "",
      loginPassword: "",
      registerUser: "",
      registerPassword: "",
      registerAgainPassword: ""
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    login() {
      //先判断一下用户名，密码是不是空
      if (this.loginUser == "" || this.loginPassword == "") {
        alert("用户名密码都不填怎么给你登录！！！");
        return;
      }

      console.log(this.loginUser);
      console.log(this.loginPassword);
      let postData = this.$qs.stringify({
        user: this.loginUser,
        password: this.loginPassword
      });

      let qs = this.$qs;

      //哈，保存一下this，不然没得了~
      var that = this;
      this.$http({
        url: "servlet/login",
        method: "post",
        //发送格式为json
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          user: that.loginUser,
          password: that.loginPassword
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          if (res.data.success == 1) {
            //存一下session
            sessionStorage.setItem("user", that.loginUser);
            sessionStorage.setItem("isLogined",true);
            that.$root.user=that.loginUser;
            if (res.data.isManager == 1) {
              that.GLOBAL.isManager=true;
              sessionStorage.setItem("isManager", true);
              //取出布尔值的时候，这样取
              //that.isManager = JSON.parse(sessionStorage.getItem('isManager'));
            } else {
              sessionStorage.setItem("isManager", false);
            }
            that.$message({
              message: "欢迎" + that.loginUser + ",登录成功!",
              type: "success"
            });

            window.history.go(-1);

          } else {
            that.$message({
              message: "用户名或密码错误，请重新登录",
              type: "error"
            });
          }
        },
        function(res) {
          console.log(res);
          console.log("啊呀，login出错啦");
        }
      );
    },
    register() {
      let qs = this.$qs;

      if (
        this.registerUser == "" ||
        this.registerPassword == "" ||
        this.registerAgainPassword == ""
      ) {
        this.$message.error("用户名密码确认密码都不填怎么给你注册！！！");
        return;
      }

      if (this.registerPassword != this.registerAgainPassword) {
        this.$message.error("两次密码输入的都不同怎么给你注册！！！");
        return;
      }

      var that = this;
      this.$http({
        url: "servlet/register",
        method: "post",
        //发送格式为json
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          user: that.registerUser,
          password: that.registerPassword
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          if (res.data.success == 1) {
            that.$message({
              message: "欢迎" + that.registerUser + ",注册成功!去登录吧",
              type: "success"
            });
            that.activeName = "first";
          } else {
            that.$message.error("用户名被人抢注拉，请重新尝试！");
          }
        },
        function(res) {
          console.log(res);
          console.log("啊呀，register出错啦");
        }
      );
    }
  }
};
</script>